<template>
	<view class="container">
		<com-head textTit="邀请好友" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="popMain"></view>
		<view class="main">
			<view class="main__num">{{invitePointData.invite_point}}<text>积分</text></view>
			<view @click.native="popFun()">
				<image class="main__img" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/btn678.png"></image>
			</view>
			<view class="main__dec">邀请好友须知 ></view>
		</view>
		
		<view class="footer">
			<view class="footer__left">
				<view class="footer__left-title">{{invitePointData.user_num}} <text>人</text></view>
				<view class="footer__left-name">已邀请好友</view>
			</view>
			
			<view class="footer__right">
				<view class="footer__right-title">{{invitePointData.point}} <text>积分</text></view>
				<view class="footer__right-name">已获得奖励</view>
			</view>
		</view>
		
		<!-- 二维码弹窗 -->
		<u-popup v-model="show" safe-area-inset-bottom mode="center" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}" border-radius="40" @close="close">
			<view class="popBox">
				<view class="popBox-bg">
					<image class="popBox-bg-img" :src="userInfo.share_code"></image>
					<view class="popBox-bg-view">
						<image :src="userInfo.avatar"></image>
						{{userInfo.nickname}}
					</view>
				</view>
			
				<view class="shareF">
					<image class="shareF-title" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/fenxiangzhi.png"></image>
					<view class="shareF-view">
						<view @click.native="downloadFile()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bendi.png"></image>
						</view>
						<view>
							<button open-type='share' class="sharebtn" >
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weixin.png"></image>
							</button>
						</view>
						<view @click.native="guideToTimelineShare()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/pengyou.png"></image>
						</view>
						<!-- <view>
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/qq.png"></image>
						</view> -->
					</view>
				</view>
				
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				scrollTop: 0,
				invitePointData: {}
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad() {
		  // #ifdef MP-WEIXIN
		  wx.showShareMenu({
		    withShareTicket: true,
		    menus: ['shareAppMessage', 'shareTimeline']
		  });
		  // #endif
		  
		  this.invitePoint()
		},
		
		//分享到朋友圈
		onShareTimeline: function (res) {
			return {
				title: '友约',
				path: `/pages/index/index?share_user_id=${this.userInfo.id}`,
			}
		},
		onShareAppMessage: function (res) {
			console.log(3434, res)
		  // if (res.from !== 'button') {
			 // 来自页面内转发按钮
			  return {
				 title: '友约',
				 path: `/pages/index/index?share_user_id=${this.userInfo.id}`,
			   }
		   // }
		},
		methods: {
			async invitePoint(){
				let {code,data} = await this.$u.api.invitePoint();
				if (code){
					this.invitePointData = data
				}
			},
			guideToTimelineShare() {
			    uni.showModal({
			      title: '提示',
			      content: '请点击右上角菜单，选择"分享到朋友圈"',
			      showCancel: false
			    })
			},
			popFun(){
				console.log(34311)
				this.show = true
			},
			close() {
				this.show = false
			},
			// 保存
			downloadFile() {
				uni.downloadFile({
					url: this.userInfo.share_code,//图片地址
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => { 
				                this.toast('保存成功')
				            },
							fail: (res) => { 
								this.toast('保存失败')
				            }
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 50rpx 32rpx;
}
.sharebtn{
	margin: 0;
	padding: 0;
	background: transparent;
}
.popMain{
	width: 750rpx;
	height: 1622rpx;
	background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016765.png');
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.main{
	width: 100%;
	text-align: center;
	margin-top: 500rpx;
	z-index: 9;
	&__num{
		color: #007664;
		font-size: 80rpx;
		font-weight: bold;
		text{
			font-size: 50rpx;
			margin-left: 10rpx;
		}
	}
	&__img{
		width: 464rpx;
		height: 85rpx;
		margin-top: 40rpx;
		// border: 1rpx solid red;
		// z-index: 99;
	}
	&__dec{
		color: #999999;
		font-size: 22rpx;
		margin-top: 20rpx;
	}
}

.footer{
	display: flex;
	height: 200rpx;
	// border: 1rpx solid;
	margin: 0 20rpx;
	margin-top: 380rpx;
	text-align: center;
	&__left{
		flex: 1;
		margin-top: 35rpx;
		&-title{
			font-size: 54rpx;
			color: #E8C778;
			text{
				font-size: 24rpx;
				color: #4D5562;
				margin-left: 5rpx;
			}
		}
		&-name{
			font-size: 24rpx;
			color: #4D5562;
			margin-top: 10rpx;
		}
	}
	&__right{
		flex: 1;
		margin-top: 35rpx;
		&-title{
			font-size: 54rpx;
			color: #007664;
			text{
				font-size: 24rpx;
				color: #4D5562;
				margin-left: 5rpx;
			}
		}
		&-name{
			font-size: 24rpx;
			color: #4D5562;
			margin-top: 10rpx;
		}
	}
}
	

::v-deep .u-mode-center-box {
	background-color: transparent !important;
}
.popBox{
	background-color: transparent !important;
	&-bg{
		width: 590rpx;
		height: 930rpx;
		background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016583.png');
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		&-img{
			width: 283rpx;
			height: 283rpx;
			margin-top: 480rpx;
		}
		&-view{
			font-size: 24rpx;
			color: #333333;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				position: relative;
				top: 15rpx;
				margin-right: 10rpx;
			}
		}
	}
	.shareF{
		background-color: transparent !important;
		text-align: center;
		&-title{
			width: 237rpx;
			height: 24rpx;
			margin: 65rpx 0 52rpx 0;
		}
		&-view{
			display: flex;
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;
			view{
				flex: 1;
				text-align: center;
				image{
					width: 100rpx;
					height: 144rpx;
				}
			}
		}
	}
}

</style>
